<template>
	<view class="myPage">
		<common-header :isCanBack="false" titleName="我的" :className="headerClassName" ref="commonHeader"></common-header>
		<view class="content">
			<image class="my_top" :src="`${img_baseUrl}/statics/std/static/my_top.jpg`"></image>
			<view v-if="!userInfo" class="header1">
				<text>欢迎使用生态岛小程序</text>
				<text @click="login">登录</text>
			</view>
			<view v-else class="header2" @click="link('/page_my/personalDetails/index')">
        <view class="left">
          <image
          	:src="(userInfo.avatar && userInfo.avatar != '') ? img_baseUrl + userInfo.avatar : `${img_baseUrl}/statics/std/static/photo.png`">
          </image>
          <view class="right">
          	<text>{{ userInfo.nickName }}</text>
          	<text>欢迎使用生态岛小程序~</text>
          </view>
        </view>
        <image class="arr_go" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
				
			</view>
			<view class="option1">
				<view class="option-item item1" @click="link('/page_my/ticket/index')">
					<image :src="`${img_baseUrl}/statics/std/static/my_icon1.png`"></image>
					<view class="right">
						<text>我的门票</text>
						<text>门票核销验票</text>
					</view>
				</view>
				<view class="option-item item2" @click="link('/page_my/order/list')">
					<image :src="`${img_baseUrl}/statics/std/static/my_icon2.png`"></image>
					<view class="right">
						<text>商城订单</text>
						<text>购买的文创商品</text>
					</view>
				</view>
			</view>
      <view class="optionList">
        <!-- <view class="item" @click="link('/page_my/travels/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/my_icon6.png`"></image>
            <text class="text">我的发布</text>
          </view>
          <view class="right">
            <image class="tip" :src="`${img_baseUrl}/statics/std/static/my_iconYJ.png`"></image>
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view> -->
        <view class="item" @click="link('/page_my/myCollection/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/my_icon4.png`"></image>
            <text class="text">我的收藏</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="item" @click="link('/page_my/users/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/my_users.png`"></image>
            <text class="text">常用游客</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="item" @click="link('/page_my/coupon/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/coupon.png`"></image>
            <text class="text">优惠券</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="item" @click="link('/page_my/address/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/my_icon3.png`"></image>
            <text class="text">地址管理</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="item" @click="link('/page_my/suggestion/list')">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/my_icon5.png`"></image>
            <text class="text">投诉建议</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
        <view class="item" @click="handleTicket">
          <view class="left">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/xiaopiao.png`"></image>
            <text class="text">核销门票</text>
          </view>
          <view class="right">
            <image class="img" :src="`${img_baseUrl}/statics/std/static/arr_go.png`"></image>
          </view>
        </view>
      </view>
		</view>
	</view>
</template>

<script>
	import commonHeader from "@/components/commonHeader.vue";
	import {
		requestGet
	} from "@/utils/request.js";

	export default {
		components: {
			commonHeader
		},
		data() {
			return {
				headerClassName: "",
				userInfo: null,
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				loadMore: true,
			};
		},
		onShow() {
			this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni
				.getStorageSync('X-UserInfo') : null;
		},
		computed: {
			isAdmin() {
				let flag = false;
				const role = (this.userInfo && this.userInfo.roles) ? this.userInfo.roles.filter(i => i.roleKey == 'check') : [];
				flag = role.length > 0 ? true : false;
				return flag
			}
		},
    mounted() {
    },
		methods: {
			onPageScroll(e) {
				if (e.scrollTop > 100) {
					this.headerClassName = "headerClass";
				} else {
					this.headerClassName = "";
				}
			},
			login() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},
			link(url) {
				if (!this.userInfo) {
					uni.showModal({
						title: '提示',
						content: '您还没有登录，请前往登录',
						showCancel: true,
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/index'
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				}
				uni.navigateTo({
					url,
				});
			},
			handleTicket() {
				// 只允许通过相机扫码
				const that = this;
				uni.scanCode({
					onlyFromCamera: true,
					success: function(data) {
						console.log('条码类型：' + data.scanType);
						console.log('条码内容：' + data.result);
						const orderId = data.result.split('&')[0] || '';
						const type = data.result.split('=')[1] || ''
						uni.navigateTo({
							url: `/page_my/ticket/check?id=${orderId}&type=${type}`
						})
						// 票-----详情
						// requestGet(`/appletTicket/detailOrder?orderId=${orderId}`, {}, '/ticket').then(detail => {
						//   if(detail.code == 200){
						//     if(detail.data.orderStatus == 4){
						//       uni.showModal({
						//       	title: '提示',
						//       	content: '该订单已核销！',
						//         showCancel: false,
						//       	success: function (res) {
						//       		if (res.confirm) {
						//       			console.log('用户点击确定');
						//       		}
						//           else if (res.cancel) {
						//       			console.log('用户点击取消');
						//       		}
						//       	}
						//       });
						//     }else{
						//       // 确认弹窗是否核销
						//       uni.showModal({
						//       	title: '提示',
						//       	content: detail.data.detaildVoList[0].commonName + '-' + detail.data.detaildVoList[0].ticketName + ',' + '是否确认核销？',
						//         showCancel: true,
						//         confirmText: '核销',
						//       	success: function (res) {
						//       		if (res.confirm) {
						//       			//销票功能
						//       			requestGet(`/appletTicket/ticCheckStatus/${orderId}`, {}, "/ticket")
						//       				.then((check) => {
						//       					uni.showModal({
						//       						title: '提示',
						//       						content: check.code == 200 ? '核销成功，是否继续核销？' : '核销异常，是否重试？',
						//       					  showCancel: true,
						//       			      cancelText: '不了',
						//       			      confirmText: check.code == 200 ? '继续核销' : '重新核销',
						//       						success: function (res) {
						//       							if (res.confirm) {
						//       								that.handleTicket();
						//       							}
						//       					    else if (res.cancel) {
						//       								console.log('用户点击取消');
						//       							}
						//       						}
						//       					});
						//       				})
						//       				.catch((err) => {
						//       			    this.comfirmModal();
						//       			  });
						//       		}
						//           else if (res.cancel) {
						//       			console.log('用户点击取消');
						//       		}
						//       	}
						//       });
						//     }
						//   }else{
						//     this.comfirmModal();
						//   }
						// })
					},
					fail: function(res) {
						console.log('扫码失败：' + res);
						uni.showToast({
							icon: "none",
							title: res
						})
					}
				});
			},
			comfirmModal() {
				uni.showModal({
					title: '提示',
					content: '核销异常，是否重试？',
					showCancel: false,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							this.handleTicket();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.myPage {
		height: 100vh;
		width: 100%;
		position: relative;
    background: #F5F7F6;

		.content {
			height: 100%;
			width: 100%;
			.my_top {
        position: absolute;
        top: 0;
        left: 0;
				height: 958rpx;
				width: 100%;
			}

			.header1 {
				position: relative;
				top: 248rpx;
				left: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;

				text:first-child {
					font-size: 32rpx;
					font-weight: 700;
					color: rgba(0,0,0,0.9);
					line-height: 34rpx;
				}

				text:last-child {
					width: 188rpx;
					height: 68rpx;
					background: #ffffff;
					border-radius: 34rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: #3FAA73;
					line-height: 68rpx;
					margin-top: 36rpx;
					text-align: center;
				}
			}

			.header2 {
				position: relative;
				top: 248rpx;
				left: 32rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
        .left{
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-start;
          image {
          	height: 120rpx;
          	width: 120rpx;
          	border-radius: 60rpx;
          	flex: 0 0 auto;
          }
          .right {
          	display: flex;
          	flex-direction: column;
          	align-items: flex-start;
          	justify-content: center;
          	margin-left: 24rpx;
          
          	text:first-child {
          		font-size: 40rpx;
          		font-weight: 700;
          		color: rgba(0,0,0,0.9);
          		line-height: 56rpx;
          	}
          
          	text:last-child {
          		font-size: 24rpx;
          		font-weight: 400;
          		color: rgba(0,0,0,0.5);
          		line-height: 34rpx;
          		margin-top: 8rpx;
          	}
          }
        }
        .arr_go{
          flex: 0 0 auto;
          height: 32rpx;
          width: 32rpx;
          margin-right: 56rpx;
        }
			}

			.option1 {
        position: relative;
        top: 244rpx;
				height: 132rpx;
				width: auto;
				margin: 72rpx 32rpx 24rpx 32rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

        .item1{
          background: #3FAA73;
        }
        .item2{
          background: #E5B000;
        }
				.option-item {
          width: 332rpx;
          height: 132rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
					image {
						height: 84rpx;
						width: 84rpx;
						flex: 0 0 auto;
            margin-left: 24rpx;
					}

					.right {
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: flex-start;
						margin-left: 16rpx;

						text:first-child {
							font-size: 32rpx;
							font-weight: 700;
							color: #FFFFFF;
							line-height: 44rpx;
						}

						text:last-child {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(255,255,255,0.8);
							line-height: 34rpx;
							margin-top: 6rpx;
						}
					}
				}
			}

			.optionList{
        position: relative;
        top: 260rpx;
        height: auto;
        background-color: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border-radius: 24rpx;
        margin: 0 32rpx;
        .item{
          width: 100%;
          height: 106rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          .left{
            flex: 0 0 auto;
            margin-left: 24rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .img{
              height: 60rpx;
              width: 60rpx;
              margin-right: 32rpx;
            }
            .text{
              height: 40rpx;
              font-size: 28rpx;
              font-weight: 700;
              color: rgba(0,0,0,0.7);
              line-height: 40rpx;
            }
          }
          .right{
            flex: 0 0 auto;
            margin-right: 24rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            .img{
              height: 32rpx;
              width: 32rpx;
            }
            .tip{
              width: 106rpx;
              height: 40rpx;
              margin-right: 8rpx;
            }
          }
        }
      }
      .option2 {
				height: auto;
				width: 100%;
				padding-top: 70rpx;
        padding-bottom: 46rpx;
				.title {
					position: relative;
					margin-left: 40rpx;

					image {
						position: absolute;
						top: -20rpx;
						left: -18rpx;
						width: 100rpx;
						height: 80rpx;
						z-index: -1;
					}

					text {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 0.8);
						line-height: 44rpx;
					}
				}

				.option-sub {
					display: flex;
					flex-direction: row;
          flex-wrap: wrap;
					align-items: flex-start;
					justify-content: flex-start;
          margin-left: 24rpx;

					.option-sub-item {
            width: 25%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-items: center;
						margin-top: 48rpx;

						image {
							height: 60rpx;
							width: 60rpx;
							flex: 0 0 auto;
						}

						text {
              width: 100%;
							margin-top: 8rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.8);
							line-height: 34rpx;
              text-align: center;
						}
					}
				}
			}

			.option3 {
				position: sticky;
				top: 100px;
				box-sizing: border-box;
				height: auto;
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
        z-index: 3;
        background-color: #ffffff;

				.title {
					position: relative;
					margin-left: 40rpx;

					image {
						position: absolute;
						top: -20rpx;
						left: -18rpx;
						width: 100rpx;
						height: 80rpx;
						z-index: -1;
					}

					text {
						font-size: 32rpx;
						font-weight: 700;
						color: rgba(0, 0, 0, 0.8);
						line-height: 44rpx;
					}
				}

				.btn {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
					width: 172rpx;
					height: 64rpx;
					background: #2187ff;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					margin-right: 40rpx;

					image {
						height: 36rpx;
						width: 36rpx;
						flex: 0 0 auto;
					}

					text {
						font-size: 32rpx;
						font-weight: 400;
						color: #ffffff;
						line-height: 44rpx;
						margin-left: 4rpx;
					}
				}
			}

			.scroll_page {
				width: 100%;
				// height: calc(100vh - 260rpx);
				// overflow-y: scroll;

				.loadMore {
					display: block;
					width: 100%;
					font-size: 24rpx;
					color: rgba(0, 0, 0, 0.5);
					text-align: center;
					line-height: 64rpx;
				}
			}

			.page {
				display: flex;
				align-items: flex-start;
				padding: 0 40rpx;
				box-sizing: border-box;

				&::-webkit-scrollbar {
					display: none !important;
				}

				.left,
				.right {
					margin: 0 auto;
					width: 48%;
				}

				.right_item {
					// width: 48%;
					margin-bottom: 24rpx;

					.right_image {
						position: relative;

						.image {
							width: 100%;
							// height: auto;
							margin-bottom: 16rpx;
							border-radius: 24rpx;
						}

						.title {
							width: 100%;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(0, 0, 0, 0.7);
							line-height: 40rpx;
							overflow: hidden; //溢出隐藏
							text-overflow: ellipsis; //省略号
							white-space: nowrap; //强制文本不换行
						}

						.info {
							width: 100%;
							height: 200rpx;
							background-color: #55aa7f;
						}

						.per {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 24rpx;
							margin-bottom: 48rpx;

							.per_lf {
								display: flex;
								align-items: center;

								image {
									width: 32rpx;
									height: 32rpx;
                  border-radius: 16rpx;
									display: block;
									margin-right: 8rpx;
								}

								text {
									font-size: 24rpx;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.8);
									line-height: 32rpx;
									margin-right: 8rpx;
								}
							}

							.per_rt {
								display: flex;
								align-items: center;

								image {
									width: 24rpx;
									height: 24rpx;
									display: block;
									margin-right: 8rpx;
								}

								text {
									font-size: 24rpx;
									font-weight: 400;
									color: #777F8F;
									line-height: 32rpx;
								}
							}
						}

						.addrees {
							position: absolute;
							bottom: 140rpx;
							left: 16rpx;
							padding: 8rpx 12rpx;
							background-color: rgba(0, 0, 0, 0.4);
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 60%;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 8rpx;
								flex: 0 0 auto;
							}

							view {
								font-size: 24rpx;
								color: #FFFFFF;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 控制最多显示两行 */
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}

					.right_video {
						min-height: 440rpx;
						position: relative;

						.video {
							width: 100%;
							height: 440rpx;
							// margin-bottom: 16rpx;
							border-radius: 24rpx;
							object-fit: cover;
						}

						.play {
							width: 64rpx;
							height: 64rpx;
							position: absolute;
							top: 24rpx;
							right: 24rpx;
						}

						video::-webkit-media-controls-start-playback-button {
							display: none;
						}

						.video_center {
							position: absolute;
							bottom: 26rpx;
							left: 0;
							width: 100%;

							.title {
								width: 100%;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 700;
								color: rgba(0, 0, 0, 0.7);
								line-height: 40rpx;
								overflow: hidden; //溢出隐藏
								text-overflow: ellipsis; //省略号
								white-space: nowrap; //强制文本不换行
							}

							.info {
								width: 100%;
								height: 200rpx;
								background-color: #55aa7f;
							}

							.per {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 32rpx;
								padding: 0 16rpx;
								// margin-bottom: 48rpx;

								.per_lf {
									display: flex;
									align-items: center;
									padding: 0 16rpx;

									image {
										width: 32rpx;
										height: 32rpx;
                    border-radius: 16rpx;
										display: block;
										margin-right: 8rpx;
									}

									text {
										font-size: 24rpx;
										font-weight: 400;
										color: #fff;
										line-height: 32rpx;
										margin-right: 8rpx;
									}
								}

								.per_rt {
									display: flex;
									align-items: center;

									image {
										width: 24rpx;
										height: 24rpx;
										display: block;
										margin-right: 8rpx;
									}

									text {
										font-size: 24rpx;
										font-weight: 400;
										color: #fff;
										line-height: 32rpx;
									}
								}
							}

							.addrees {
                width: 60%;
								padding: 8rpx 12rpx;
								background-color: rgba(0, 0, 0, 0.4);
								border-radius: 24rpx 24rpx 24rpx 24rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-left: 16rpx;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
                  flex: 0 0 auto;
								}

								view {
									font-size: 24rpx;
									color: #FFFFFF;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  /* 控制最多显示两行 */
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
